
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>项目汇报 - 挑战与解决方案</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .animate-fade-in-up {
            animation: fadeInUp 0.8s ease-out forwards;
        }
        .slide-container {
            width: 1280px;
            min-height: 720px;
        }
    </style>
</head>
<body class="bg-gray-100 flex items-center justify-center min-h-screen p-8">
    <!-- 幻灯片容器 -->
    <div class="slide-container bg-white rounded-xl shadow-2xl overflow-hidden">
        <!-- 标题栏 -->
        <div class="bg-gradient-to-r from-blue-600 to-blue-400 p-6">
            <h1 class="text-3xl font-bold text-white animate-fade-in-up opacity-0">
                <i class="fas fa-exclamation-triangle mr-3"></i>挑战与解决方案
            </h1>
        </div>

        <!-- 内容主体 -->
        <div class="p-8 grid grid-cols-1 lg:grid-cols-2 gap-8">
            <!-- 挑战部分 -->
            <div class="animate-fade-in-up opacity-0" style="animation-delay: 0.3s">
                <div class="bg-blue-50 rounded-lg p-6 h-full">
                    <div class="flex items-center mb-4">
                        <i class="fas fa-fire text-2xl text-red-500 mr-3"></i>
                        <h2 class="text-xl font-semibold text-blue-800">主要挑战</h2>
                    </div>
                    <ul class="space-y-4">
                        <li class="flex items-start">
                            <i class="fas fa-clock text-blue-500 mt-1 mr-3"></i>
                            <div>
                                <h3 class="font-medium">时间紧迫</h3>
                                <p class="text-sm text-gray-600">项目周期压缩30%，交付期限提前</p>
                            </div>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-microchip text-blue-500 mt-1 mr-3"></i>
                            <div>
                                <h3 class="font-medium">技术瓶颈</h3>
                                <p class="text-sm text-gray-600">分布式系统性能优化难度大</p>
                            </div>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-users text-blue-500 mt-1 mr-3"></i>
                            <div>
                                <h3 class="font-medium">团队协作</h3>
                                <p class="text-sm text-gray-600">跨部门沟通效率待提升</p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>

            <!-- 解决方案部分 -->
            <div class="animate-fade-in-up opacity-0" style="animation-delay: 0.6s">
                <div class="bg-blue-50 rounded-lg p-6 h-full">
                    <div class="flex items-center mb-4">
                        <i class="fas fa-lightbulb text-2xl text-yellow-500 mr-3"></i>
                        <h2 class="text-xl font-semibold text-blue-800">应对方案</h2>
                    </div>
                    <ul class="space-y-4">
                        <li class="flex items-start">
                            <i class="fas fa-tasks text-blue-500 mt-1 mr-3"></i>
                            <div>
                                <h3 class="font-medium">敏捷开发</h3>
                                <p class="text-sm text-gray-600">采用Scrum模式，每日站会跟踪进度</p>
                            </div>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-chart-line text-blue-500 mt-1 mr-3"></i>
                            <div>
                                <h3 class="font-medium">性能优化</h3>
                                <p class="text-sm text-gray-600">引入缓存机制，优化数据库查询</p>
                            </div>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-comments text-blue-500 mt-1 mr-3"></i>
                            <div>
                                <h3 class="font-medium">沟通机制</h3>
                                <p class="text-sm text-gray-600">建立跨部门协作平台，每周同步会</p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>

            <!-- 图表部分 -->
            <div class="col-span-full animate-fade-in-up opacity-0" style="animation-delay: 0.9s">
                <div class="bg-white rounded-lg p-4 shadow-md">
                    <canvas id="progressChart"></canvas>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 初始化动画
        document.querySelectorAll('.animate-fade-in-up').forEach((el, index) => {
            el.style.opacity = 0;
            setTimeout(() => el.style.opacity = 1, index * 300);
        });

        // 初始化图表
        const ctx = document.getElementById('progressChart').getContext('2d');
        new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ['时间管理', '技术优化', '团队协作'],
                datasets: [{
                    label: '改进效果',
                    data: [75, 85, 80],
                    backgroundColor: [
                        'rgba(37, 99, 235, 0.8)',
                        'rgba(59, 130, 246, 0.8)',
                        'rgba(96, 165, 250, 0.8)'
                    ],
                    borderColor: [
                        'rgba(37, 99, 235, 1)',
                        'rgba(59, 130, 246, 1)',
                        'rgba(96, 165, 250, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true,
                        max: 100,
                        title: {
                            display: true,
                            text: '改善程度 (%)'
                        }
                    }
                },
                plugins: {
                    legend: {
                        position: 'top',
                    }
                }
            }
        });
    </script>
</body>
</html>
